<template>
  <div class="edit-course">
    <div class="com-content">
      <editCourse ref="courseFormRef" />
      <div class="dialog-footer">
        <el-button type="primary" @click="saveEdit">保存</el-button>
        <!-- <el-button type="danger">取消</el-button> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from "vue";
import editCourse from "@/views/teach/course/course-form/index.vue";
import { useRouter } from "vue-router";
import store from "@/store/index";
import { ElMessage, ElNotification } from 'element-plus';
const router = useRouter()
const { proxy } = getCurrentInstance()
const courseFormRef = ref(null)

// 验证必填
const verifySubmit = () => {
  const sureData = courseFormRef.value.courseFormState
	let isOk = true
	let messageInfo = ""
	if (!sureData.name) {
		isOk = false
		messageInfo = "请输入课程名称"
		tipsFun(messageInfo)
	}
	if (!sureData.validity) {
		isOk = false
		messageInfo = "请输入有效期"
		tipsFun(messageInfo)
	}
	return isOk;
}

// 提示
const tipsFun = (messageInfo) => {
	ElNotification({
		title: '提示',
		message: messageInfo,
		type: 'warning',
		duration: 1000,
	})
}

// 保存编辑
const saveEdit = () => {
  if(!verifySubmit()){return}
  // 如果courseFormRef.value.delVideoUrl有值则代表编辑的时候有修改到视频（删除或替换）
  if (courseFormRef.value.delVideoUrl) {
    courseFormRef.value.courseFormState.propagandizeDelete = courseFormRef.value.delVideoUrl
  }
  // 如果courseFormState.value.propagandize没有值则不传该字段
  if (!courseFormRef.value.courseFormState.propagandize) {
    delete(courseFormRef.value.courseFormState.propagandize)
  }
  if (courseFormRef.value.courseFormState.outlines.length > 0) {
    courseFormRef.value.courseFormState.outlines.forEach((item, index) => {
      item.times = index + 1
    })
  }
  if (courseFormRef.value.courseFormState.tools.length > 0) {
    courseFormRef.value.courseFormState.tools.forEach((item, index) => {
      item.order = index
    })
  }
  const formData = new FormData()
  Object.entries(courseFormRef.value.courseFormState).forEach(([key, value]) => {
    if (key === 'tools' || key == 'outlines') {
      for (let i = 0; i < value.length; i++) {
        for (const keys in value[i]) {
          formData.append(`${key}[${i}].${keys}`, value[i][keys])
        }
      }
    } else {
      formData.append(key, value)
    }
  })
  proxy.$API.course.update.get(formData).then(res => {
    closeSelectedTag(nowTag.value)
    ElMessage({
      message: res.message,
      type: 'success',
    })
  })
}


const tagList = ref(store.state.viewTags.viewTags)

const nowTag = computed(() => {
  let tag = null
  tagList.value.forEach(item => {
    if (item.name == "editCourse") {
      tag = item
    }
  })
  return tag
})

//关闭tag
const closeSelectedTag = (tag) => {
	store.commit("removeViewTags", tag)
	store.commit("removeIframeList", tag)
	store.commit("removeKeepLive", tag.name)
  router.push({
    path: "/teach/course"
  })
}
</script>

<style lang="scss" scoped>
.edit-course {
  background-color: #fff;

  .com-content {
    width: 50%;
  }

  .dialog-footer {
    padding-bottom: 40px;
    padding-left: 100px;
  }
}
</style>